<template>
    <div>
		<div class="dialog__wrap">
			<transition name="background-fade">
				<div class="dialog__background"></div>
			</transition>
			<transition name="fade-move">
			  	<div class="dialog">
					<div class="dialog__head">
						<span class="dialog__head__title">
							{{dialog_config.dialog_title}}
						</span>
                        <span>{{dialog_config.dialog_desc}}</span>
                        <!-- <i class="iconfont icon-cuo"></i> -->
					</div>
					<div class="dialog__body">
                        <div :class="validClass($v.textFrom.mobile)">
                            <span>
                                <input type="text" maxlength="11" v-model="textFrom.mobile" @input="$v.textFrom.mobile.$touch()">
                            </span>
                        </div>
                        <div :class="validClass($v.textFrom.password)">
                            <span>
                                <input type="password" maxlength="16" v-model="textFrom.password" @input="$v.textFrom.password.$touch()">
                            </span>
                        </div>
				  	</div>
					<div class="dialog__footer">
						<button class="dialogbtnner" @click="dialogbtn()" :disabled="pending">{{dialog_config.dialog_sure}}</button>
					</div>
			    </div>
		  	</transition>
	    </div>
    </div>
</template>

<script>
import { required, minLength } from "vuelidate/lib/validators";
import { telNumPattern } from "@/class/product-validation.class";

class Dialog {
    dialog_title;
    dialog_sure;
}
    export default {
        data() {
            return {
                dialog_config: new Dialog(),
                stateShow: true,
                textFrom: {
                    mobile: '',
                    password: '',
                },
                pending: false
            }
        },
        validations: {
            textFrom: {
                mobile: {
                    required,
                },
                password: {
                    required,
                    minLength: minLength(6)
                },
            }
        },
        methods: {
            // 根据字段验证转换 class 状态
            validClass(data) {
                if (!data) return {};
                return {
                    error: data["$dirty"] && data["$invalid"],
                    success: data["$dirty"] && !data["$invalid"]
                };
            },
        }
    }
</script>

<style lang="scss" scoped>
	//请输入登录密码
	.dialog {
		width: 5.48rem;
		border-radius: 4px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate3d(-50%, -50%, 0);
		background-color: #fff;
		font-size: 0.32rem;
		z-index: 12;
		&__wrap {
		}
		&__background {
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.2);
			position: fixed;
			left: 0;
			top: 0;
			z-index: 10;
		}
		&__head {
			padding: 0.26rem 0;
			line-height: 1;
			text-align: center;
			position: relative;
			&__title {
				line-height: 1;
				font-size: 0.26rem;
			}
			&__btn {
				line-height: 1;
				position: absolute;
				right: .2rem;
				top: .2rem;
				font-size: 0.32rem;
				color: #999;
				-webkit-text-stroke-width: 0.02rem;
				width: 0.4rem;
				height: 0.4rem;
				border: 1px solid #999;
				border-radius: 50%;
				background-color: #999;
				color: #fff;
				line-height: 0.38rem;
			}
		}
		&__body {
			padding: 0.1rem 0.3rem;
			color: #666;
			font-size: 0.28rem;
			white-space: normal;
			word-break: break-all;
			span {
				display: block;
				margin-bottom: 0.2rem;
				input {
					display: inline-block;
					border: 1px solid #dcdcdc;
					border-radius: 4px;
					background-color: #eef2f7;
					width: 3.87rem;
					padding: .16rem 0;
					font-size: .28rem;
					color: #666;
				}
			}
			p {
				margin-top: -0.2rem;
				font-size: 0.22rem;
				color: #ea340c;
			}
		}
		&__footer {
			text-align: center;
			padding: 0.05rem 0 0;
			font-size: 0;
			.dialogbtnner {
			  background-color: #e50838;
			  color: #e50838;
              border: 1px solid #e50838;
              border-radius: 4px;
			  width: 4.5rem;
			  height: 0.7rem;
			}
		}
	}
	.background-fade {
		&-enter {
			opacity: 0;
		}
		&-enter-active {
			transition: opacity 0.2s;
		}
		&-enter-top {
			opacity: 1;
		}
		&-leave {
			opacity: 1;
		}
		&-leave-active {
			transition: opacity 0.2s;
			opacity: 0;
		}
	}
	.fade-move {
		&-enter {
			opacity: 0.6;
			top: 45%;
		}
		&-enter-active {
			transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
		}
		&-enter-to {
			opacity: 1;
			top: 50%;
		}
		&-leave {
		}
		&-leave-active {
		}
		&-leave-to {
		}
	}
</style>